<!--
 * @Author: Tao
 * @Date: 2021-10-22 14:17:00
 * @LastEditors: Tao
 * @LastEditTime: 2021-10-25 14:56:15
 * @Description: 
-->
<template>
  <div class="orderComment">
    <el-table :data="orderComment.list">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="content" label="评论内容"></el-table-column>
      <el-table-column prop="customerId" label="顾客编号"></el-table-column>
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column  label="评论时间">
        <template v-slot="scope">
          {{ scope.row.commentTime | fmtDateTime}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="评论状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == '通过'" type="success">
            {{ scope.row.status}}
          </el-tag>
          <el-tag v-else type="danger">
            {{ scope.row.status}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="操作" >
        <template v-slot="scope">
          <el-button @click="deleteHandler(scope.row.id,$event)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orderComment.page"
        :page-sizes="[7, 10, 12, 15]"
        :page-size="orderComment.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderComment.total">
      </el-pagination>
  </div>
</template> 
<script>
import request from "@/utils/request"
export default {
  data(){
    return{
      orderComment: [],
      queryParams:{
        page:1,
        pageSize:10
      }
    }
  },
  methods:{
    fillAllOrderComment(){
      request.get('/orderComment/pageQuery', {
        params: this.queryParams,
      }).then(res => {
        this.orderComment = res.data; 
      }) 
    },
    // 通过id删除操作
    deleteHandler(id,e){
      if(e.target.innerText == "删除"){
         this.$confirm('确定删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.get("/orderComment/deleteById",{
            params:{
              id
            }
          }).then(res => {
            // 重载数据
            this.fillAllOrderComment();
            // 提示成功的信息
            this.$message({
              message:res.message,
              type:"success"
            })
          })
        })
      }
    },
    handleSizeChange(page){
      this.queryParams.page = page;
      this.fillAllOrderComment();
    },
    handleCurrentChange(pageSize){
      this.queryParams.pageSize = pageSize;
      this.fillAllOrderComment();
    }

  },
 created(){
    this.fillAllOrderComment();
  }
}
</script>